<template>
	<div style="display: block">
		<div>
			<el-card class="box-card">
				<selfunc
					ref="upload_sel"
					:strict="false"
					@change="judgeDisabled"
					:position="position"
				></selfunc>
			</el-card>
			<el-card>
				<span style="color: red">*必选(多选)</span>
				<el-checkbox-group v-model="checkList">
					<el-checkbox label="筛选"></el-checkbox>
					<el-checkbox label="搜索"></el-checkbox>
					<el-checkbox label="排序"></el-checkbox>
					<el-checkbox label="控件"></el-checkbox>
					<el-checkbox label="文案"></el-checkbox>
					<el-checkbox label="流程"></el-checkbox>
					<el-checkbox label="适老化"></el-checkbox>
					<el-checkbox label="合规"></el-checkbox>
					<el-checkbox label="多版本多主题"></el-checkbox>
					<el-checkbox label="UI"></el-checkbox>
					<el-checkbox label="交互"></el-checkbox>
					<el-checkbox label="其他"></el-checkbox>
				</el-checkbox-group>
			</el-card>
			<el-card v-if="position != 'ppt'">
				<span style="color: red">*必选(单选)</span>
				<el-radio v-model="innovation" label="视觉创新"></el-radio>
				<el-radio v-model="innovation" label="交互创新"></el-radio>
				<el-radio v-model="innovation" label="技术创新"></el-radio>
				<el-radio v-model="innovation" label="功能创新"></el-radio>
				<el-radio v-model="innovation" label="产品创新"></el-radio>
				<el-radio v-model="innovation" label="营销创新"></el-radio>
			</el-card>

			<!--选择指标-->
			<el-card>
				<!--第1级-->
				<span style="font-size: 18px; color: darkgrey">可选</span>
				<el-select
					v-model="title0"
					placeholder="请选择"
					@change="assessChange0"
				>
					<el-option
						v-for="item in options0"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
				<!--第2级-->
				<el-select
					v-model="title1"
					placeholder="请选择"
					@change="assessChange1"
				>
					<el-option
						v-for="item in options1"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
				<!--第3级-->
				<el-select
					v-model="title2"
					placeholder="请选择"
					@change="assessChange2"
				>
					<el-option
						v-for="item in options2"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
				<!--第4级-->
				<el-select
					v-model="title3"
					placeholder="请选择"
					@change="assessChange3"
				>
					<el-option
						v-for="item in options3"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
				<!--第5级-->
				<el-select
					v-model="title4"
					placeholder="请选择"
					@change="assessChange4"
				>
					<el-option
						v-for="item in options4"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
				<el-button
					type="danger"
					icon="el-icon-delete"
					@click="deleteAssess"
				></el-button>
			</el-card>
			<el-card>
				<el-upload
					ref="upload"
					class="upload-demo"
					action="/posts/"
					:data="selectObj"
					:auto-upload="false"
					:file-list="fileList"
					list-type="picture"
					:on-success="onSuccess"
					:before-upload="beforeUpload"
					:on-change="handleChange"
					accept=".jpg,.png,.jpeg"
					multiple
				>
					<el-button
						slot="trigger"
						size="small"
						:type="disabled ? 'info' : 'primary'"
						>选取文件</el-button
					>
					<el-button
						v-if="type == null"
						style="margin-left: 10px"
						size="small"
						type="success"
						@click="submitUpload"
						:disabled="disabled"
						>上传到服务器</el-button
					>
					<div class="el-upload__tip" slot="tip">只能上传jpg/jpeg/png文件</div>
				</el-upload>
			</el-card>
		</div>
	</div>
</template>
    
<script>
module.exports = {
	data() {
		return {
			fileList: [],
			input_func: "",
			checkList: [],
			innovation: null,
			title0: null,
			title1: null,
			title2: null,
			title3: null,
			title4: null,
			options0: [],
			options1: [],
			options2: [],
			options3: [],
			options4: [],
			selectObj: null,
			disabled: true, //上传按钮不可用标记 默认为不可用
		};
	},
	props: [
		"page",
		"index",
		"type",
		"position",
		"product_name",
		"ver",
		"inno",
		"column",
	],
	emits: ["afterupload", "disabled"],
	components: {
		selfunc: httpVueLoader("/selfunc.vue"),
	},
	watch: {
		innovation: function () {
			this.setObj();
			this.judgeDisabled(this.$refs.upload_sel.switchvalue);
		},
		product_name: function () {
			this.setObj();
			this.judgeDisabled(this.$refs.upload_sel.switchvalue);
		},
		ver: function () {
			this.setObj();
			this.judgeDisabled(this.$refs.upload_sel.switchvalue);
		},
		inno: function () {
			this.setObj();
			this.judgeDisabled(this.$refs.upload_sel.switchvalue);
		},
		checkList: {
			handler(newval, oldval) {
				this.setObj();
				this.judgeDisabled(this.$refs.upload_sel.switchvalue);
			},
			deep: true,
		},
		index: function () {
			this.setObj();
		},
		column: function () {
			this.setObj();
		},
	},
	created: function () {
		axios.get(`/assesstitle`).then((res) => {
			for (let item of res.data) {
				this.options0.push({ label: item.title, value: item.title });
			}
		});
	},
	methods: {
		beforeUpload(file) {
			if (this.$refs.upload_sel.value1.length === 0) {
				this.$message.error("失败：请输入完整的功能模块");
				return false;
			}

			if (this.position == "ppt") {
				if (this.product_name == "" || this.ver == "") {
					this.$message.error("失败：请在ppt页面App名称和版本号");
					return false;
				}
				if (this.inno == null || this.inno == "") {
					this.$message.error("失败：请选择特色类型");
					return false;
				}
			} else {
				if (this.$refs.upload_sel.switchvalue) {
					//手动输入
					if (
						this.$refs.upload_sel.input_app == "" ||
						this.$refs.upload_sel.input_ver == ""
					) {
						this.$message.error("失败：请输入完整的App信息");
						return false;
					}
				} else {
					if (this.$refs.upload_sel.value2.length === 0) {
						this.$message.error("失败：请选择完整的App信息");
						return false;
					}
				}
				if (this.innovation == null) {
					this.$message.error("失败：请选择创新");
					return false;
				}
			}

			if (this.checkList.length === 0) {
				this.$message.error("失败：请选择专项标签");
				return false;
			}
		},
		submitUpload() {
			console.log(this.selectObj);
			this.$refs.upload.submit();
		},
		handleChange(file, fileList) {
			this.fileList = fileList.slice(-5);
		},
		onSuccess(response, file, fileList) {
			this.$refs.upload_sel.init();
			this.fileList = [];
			this.$emit("afterupload");
		},
		assessChange0(target0) {
			this.setObj();
			this.title1 = null;
			this.title2 = null;
			this.title3 = null;
			this.title4 = null;
			this.options1 = [];
			this.options2 = [];
			this.options3 = [];
			this.options4 = [];
			if (target0 != null)
				axios.get(`/assesstitle?con0=${target0}`).then((res) => {
					for (let item of res.data) {
						this.options1.push({ label: item.title, value: item.title });
					}
				});
		},
		assessChange1(target1) {
			this.setObj();
			this.title2 = null;
			this.title3 = null;
			this.title4 = null;
			this.options2 = [];
			this.options3 = [];
			this.options4 = [];
			if (target1 != null)
				axios
					.get(`/assesstitle?con0=${this.title0}&con1=${target1}`)
					.then((res) => {
						for (let item of res.data) {
							this.options2.push({ label: item.title, value: item.title });
						}
					});
		},
		assessChange2(target2) {
			this.setObj();
			this.title3 = null;
			this.title4 = null;
			this.options3 = [];
			this.options4 = [];
			if (target2 != null)
				axios
					.get(
						`/assesstitle?con0=${this.title0}&con1=${this.title1}&con2=${target2}`
					)
					.then((res) => {
						for (let item of res.data) {
							this.options3.push({ label: item.title, value: item.title });
						}
					});
		},

		assessChange3(target3) {
			this.setObj();
			this.title4 = null;
			this.options4 = [];
			if (target3 != null)
				axios
					.get(
						`/assesstitle?con0=${this.title0}&con1=${this.title1}&con2=${this.title2}&con3=${target3}`
					)
					.then((res) => {
						for (let item of res.data) {
							this.options4.push({ label: item.title, value: item.title });
						}
					});
		},
		assessChange4() {
			this.setObj();
		},
		deleteAssess() {
			this.title0 = null;
			this.title1 = null;
			this.title2 = null;
			this.title3 = null;
			this.title4 = null;
			this.options1 = [];
			this.options2 = [];
			this.options3 = [];
			this.options4 = [];
		},

		setObj() {
			if (this.position == "ppt") {
				this.selectObj = {
					func1: this.$refs.upload_sel.value1[0],
					func2: this.$refs.upload_sel.value1[1],
					app: this.product_name,
					ver: this.ver,
					check: this.checkList,
					innovation: this.inno,
					assess0: this.title0,
					assess1: this.title1,
					assess2: this.title2,
					assess3: this.title3,
					assess4: this.title4,
					page: this.page,
					index: this.index,
					type: this.type,
					user: decodeURI(window.location.pathname.split("/")[1]),
					task: decodeURI(window.location.pathname.split("/")[2]),
				};
			} else {
				if (this.$refs.upload_sel.switchvalue) {
					//手动输入
					this.selectObj = {
						func1: this.$refs.upload_sel.value1[0],
						func2: this.$refs.upload_sel.value1[1],
						app: this.$refs.upload_sel.input_app,
						ver: this.$refs.upload_sel.input_ver,
						check: this.checkList,
						innovation: this.innovation,
						assess0: this.title0,
						assess1: this.title1,
						assess2: this.title2,
						assess3: this.title3,
						assess4: this.title4,
						page: this.page,
						column: this.column,
						index: this.index,
						type: this.type,
						user: decodeURI(window.location.pathname.split("/")[1]),
						task: decodeURI(window.location.pathname.split("/")[2]),
					};
				} else {
					//选择
					this.selectObj = {
						func1: this.$refs.upload_sel.value1[0],
						func2: this.$refs.upload_sel.value1[1],
						app: this.$refs.upload_sel.value2[0],
						ver: this.$refs.upload_sel.value2[1],
						check: this.checkList,
						innovation: this.innovation,
						assess0: this.title0,
						assess1: this.title1,
						assess2: this.title2,
						assess3: this.title3,
						assess4: this.title4,
						page: this.page,
						column: this.column,
						index: this.index,
						type: this.type,
						user: decodeURI(window.location.pathname.split("/")[1]),
						task: decodeURI(window.location.pathname.split("/")[2]),
					};
				}
			}
		},

		judgeDisabled(sw) {
			if (this.checkList.length === 0) {
				this.disabled = true;
				this.$emit("disabled", this.disabled);
				return;
			}
			if (this.$refs.upload_sel.value1.length == 0) {
				this.disabled = true;
				this.$emit("disabled", this.disabled);
				return;
			}
			if (this.position == "ppt") {
				this.setObj();
				if (
					this.product_name == "" ||
					this.ver == "" ||
					this.inno == null ||
					this.inno == ""
				) {
					this.disabled = true;
					this.$emit("disabled", this.disabled);
					return;
				}
			} else {
				if (sw) {
					//手动输入
					this.setObj();
					if (
						this.$refs.upload_sel.input_app == "" ||
						this.$refs.upload_sel.input_ver == ""
					) {
						this.disabled = true;
						this.$emit("disabled", this.disabled);
						return;
					}
				} else {
					//选择
					this.setObj();

					if (this.$refs.upload_sel.value2.length === 0) {
						//app和版本没有选择
						this.disabled = true;
						this.$emit("disabled", this.disabled);
						return;
					}
				}

				if (this.innovation == null) {
					this.disabled = true;
					this.$emit("disabled", this.disabled);
					return;
				}
			}
			this.disabled = false;
			this.$emit("disabled", this.disabled);
		},
	},
};
</script>

<style scoped>
label {
	margin-right: 10px;
}
.glyphicon-remove {
	float: right;
}

.el-input {
	margin-top: 10px;
	width: 221.4px;
}

.el-checkbox-group {
	text-align: center;
}

h3 {
	margin-top: 20px;
	color: darkgrey;
}

.el-card__body {
	margin-bottom: 20px;
	text-align: center;
}
</style>